<template>
  <div class="main">
    <div id="app" class="lottery-generator">
      <header class="header">
        <h1>幸运彩票号码生成器</h1>
        <p>随机生成多种彩票号码，仅供娱乐参考</p>
      </header>

      <main class="main-content">
        <div style="overflow: hidden">
          <!-- 彩票类型选择 -->
          <section class="lottery-type-section">
            <h2>选择彩票类型</h2>
            <div class="lottery-types">
              <button
                v-for="item in lotteryTypes"
                :key="item.id"
                :class="['type-btn', { active: selectedType.id === item.id }]"
                @click="selectLotteryType(item)"
              >
                {{ item.name }}
              </button>
            </div>
          </section>

          <!-- 生成选项 -->
          <section class="options-section">
            <div class="option-item">
              <label for="count">生成注数：</label>
              <input type="number" id="count" v-model.number="generationCount" min="1" max="10" />
            </div>
            <button class="generate-btn" @click="generateNumbers">
              <span class="icon">🎲</span>
              生成号码
            </button>
          </section>
          <!-- 生成的号码 -->
          <section class="results-section">
            <h2>生成的号码</h2>
            <div class="results-container">
              <div v-for="(result, index) in generatedResults" :key="index" class="result-item">
                <div class="result-header">
                  <span>第{{ index + 1 }}注</span>
                  <span class="lottery-name">{{ selectedType.name }}</span>
                </div>
                <div class="numbers-display">
                  <div class="main-numbers">
                    <span
                      v-for="(num, i) in result.mainNumbers"
                      :key="i"
                      class="number-ball main-ball"
                      :style="getBallStyle(num, 'main')"
                    >
                      {{ num }}
                    </span>
                  </div>
                  <div v-if="result.specialNumbers.length" class="special-numbers">
                    <span
                      v-for="(num, i) in result.specialNumbers"
                      :key="i"
                      class="number-ball special-ball"
                      :style="getBallStyle(num, 'special')"
                    >
                      {{ num }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>

        <!-- 历史记录 -->

        <section class="history-section" v-if="history.length">
          <div class="history-header">
            <h2>历史记录</h2>
            <button class="clear-btn" @click="clearHistory">清空历史</button>
          </div>
          <div class="history-list">
            <div v-for="(item, index) in history" :key="index" class="history-item">
              <div class="history-info">
                <span class="lottery-name">{{ item.type.name }}</span>
                <span class="history-time">{{ item.time }}</span>
              </div>
              <div class="history-numbers">
                <span
                  v-for="(num, i) in item.numbers.mainNumbers"
                  :key="i"
                  class="number-ball main-ball"
                  :style="getBallStyle(num, 'main')"
                >
                  {{ num }}
                </span>
                <span
                  v-for="(num, i) in item.numbers.specialNumbers"
                  :key="i"
                  class="number-ball special-ball"
                  :style="getBallStyle(num, 'special')"
                >
                  {{ num }}
                </span>
              </div>
            </div>
          </div>
        </section>
      </main>

      <footer class="footer">
        <p>免责声明：本工具仅供娱乐参考，不保证中奖概率</p>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LotteryGenerator',
  data () {
    return {
      selectedType: {
        id: 'ssq',
        name: '双色球',
        mainCount: 6,
        mainRange: 33,
        specialCount: 1,
        specialRange: 16
      },
      generationCount: 5,
      generatedResults: [],
      history: [],
      lotteryTypes: [
        {
          id: 'ssq',
          name: '双色球',
          mainCount: 6,
          mainRange: 33,
          specialCount: 1,
          specialRange: 16
        },
        {
          id: 'dlt',
          name: '大乐透',
          mainCount: 5,
          mainRange: 35,
          specialCount: 2,
          specialRange: 12
        },
        {
          id: 'qlc',
          name: '七乐彩',
          mainCount: 7,
          mainRange: 30,
          specialCount: 1,
          specialRange: 30
        },
        {
          id: 'fc3d',
          name: '福彩3D',
          mainCount: 3,
          mainRange: 9,
          specialCount: 0,
          specialRange: 0
        },
        {
          id: 'pl3',
          name: '排列三',
          mainCount: 3,
          mainRange: 9,
          specialCount: 0,
          specialRange: 0
        },
        {
          id: 'pl5',
          name: '排列五',
          mainCount: 5,
          mainRange: 9,
          specialCount: 0,
          specialRange: 0
        }
      ]
    }
  },
  mounted () {
    // 从本地存储加载历史记录
    const savedHistory = localStorage.getItem('lotteryHistory')
    if (savedHistory) {
      this.history = JSON.parse(savedHistory)
    }

    // 初始生成一次号码
    this.generateNumbers()
  },
  methods: {
    selectLotteryType (type) {
      this.selectedType = type
    },

    generateNumbers () {
      this.generatedResults = []

      for (let i = 0; i < this.generationCount; i++) {
        const mainNumbers = this.generateUniqueNumbers(
          this.selectedType.mainCount,
          this.selectedType.mainRange
        )

        let specialNumbers = []
        if (this.selectedType.specialCount > 0) {
          specialNumbers = this.generateUniqueNumbers(
            this.selectedType.specialCount,
            this.selectedType.specialRange
          )
        }

        this.generatedResults.push({
          mainNumbers,
          specialNumbers
        })

        // 添加到历史记录
        this.addToHistory(mainNumbers, specialNumbers)
      }
    },

    generateUniqueNumbers (count, range) {
      const numbers = []
      while (numbers.length < count) {
        const num = Math.floor(Math.random() * range) + 1
        if (!numbers.includes(num)) {
          numbers.push(num)
        }
      }
      return numbers.sort((a, b) => a - b)
    },

    addToHistory (mainNumbers, specialNumbers) {
      const now = new Date()
      const timeString = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`

      this.history.unshift({
        type: this.selectedType,
        numbers: {
          mainNumbers,
          specialNumbers
        },
        time: timeString
      })

      // 限制历史记录数量
      if (this.history.length > 100) {
        this.history = this.history.slice(0, 100)
      }

      // 保存到本地存储
      localStorage.setItem('lotteryHistory', JSON.stringify(this.history))
    },

    clearHistory () {
      this.history = []
      localStorage.removeItem('lotteryHistory')
    },

    getBallStyle (number, type) {
      // 根据号码和球类型返回不同的样式
      if (type === 'special') {
        return {
          backgroundColor: '#f56c6c',
          color: 'white'
        }
      }

      // 主球根据号码范围设置不同颜色
      let color
      if (number <= 10) {
        color = '#e6a23c' // 橙色
      } else if (number <= 20) {
        color = '#67c23a' // 绿色
      } else if (number <= 30) {
        color = '#409eff' // 蓝色
      } else {
        color = '#909399' // 灰色
      }

      return {
        backgroundColor: color,
        color: 'white'
      }
    }
  }
};
</script>

<style scoped>
/* 滚动条整体部分 */
::-webkit-scrollbar {
  width: 12px; /* 滚动条的宽度 */
  height: 12px; /* 滚动条的高度 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: darkgrey; /* 滑块颜色 */
  border-radius: 10px; /* 滑块圆角 */
  border: 2px solid rgb(255, 255, 255); /* 滑块边框 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道颜色 */
}

.main {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
}
.history-section {
  width: 500px;
}
.lottery-generator {
  width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eaeaea;
}

.header h1 {
  color: #e4393c;
  margin-bottom: 10px;
  font-size: 28px;
}

.header p {
  color: #666;
  font-size: 16px;
}

.main-content {
  margin-bottom: 30px;
  display: flex;
  justify-content: space-evenly;
  height: 800px;
}
.results-section {
  overflow-y: scroll;
  height: 600px;
}
.history-section {
  overflow-y: scroll;
}

section {
  margin-bottom: 30px;
}

h2 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
  border-left: 4px solid #e4393c;
  padding-left: 10px;
}

.lottery-types {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.type-btn {
  padding: 8px 16px;
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.type-btn:hover {
  background-color: #ecf5ff;
  border-color: #c6e2ff;
}

.type-btn.active {
  background-color: #e4393c;
  color: white;
  border-color: #e4393c;
}

.options-section {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.option-item label {
  font-size: 14px;
}

.option-item input {
  width: 60px;
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  text-align: center;
}

.generate-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: #e4393c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.generate-btn:hover {
  background-color: #c62f2f;
}

.icon {
  font-size: 18px;
}

.results-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.result-item {
  padding: 15px;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.result-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.lottery-name {
  font-weight: bold;
  color: #e4393c;
}

.numbers-display {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.main-numbers,
.special-numbers {
  display: flex;
  gap: 8px;
}

.number-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.main-ball {
  background-color: #f56c6c;
  color: white;
}

.special-ball {
  background-color: #409eff;
  color: white;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.clear-btn {
  padding: 6px 12px;
  background-color: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: #666;
}

.clear-btn:hover {
  background-color: #fef0f0;
  color: #e4393c;
  border-color: #fbc4c4;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item {
  padding: 12px;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  background-color: #f9f9f9;
}

.history-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  color: #999;
}

.history-numbers {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.history-numbers .number-ball {
  width: 30px;
  height: 30px;
  font-size: 14px;
}

.footer {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #eaeaea;
  color: #999;
  font-size: 12px;
}

@media (max-width: 600px) {
  .lottery-generator {
    padding: 15px;
  }

  .header h1 {
    font-size: 24px;
  }

  .lottery-types {
    justify-content: center;
  }

  .options-section {
    justify-content: center;
  }

  .numbers-display {
    justify-content: center;
  }
}
</style>